<template>
	<view class="container">		
		<!--功能卡片-->
		<view class="card-list">
			<view class="card-row">
				<view class="card" @click="goTo('inventory')">
					<image src="/static/inventory.png" class="icon-img" />
					<view class="card-title-row">
						<text class="card-title">库存管理</text>
						<view class="badge">1,234</view>
					</view>
					<text class="card-desc">查看当前库存状态</text>
				</view>
				
				<view class="card" @click="goTo('outbound')">
					<image src="/static/outbound.png" class="icon-img" />
					<view class="card-title-row">
						<text class="card-title">出库管理</text>
						<view class="badge">56</view>
					</view>
					<text class="card-desc">处理物料出库</text>
				</view>
				
			</view>
			
			<view class="card-row">
				<view class="card" @click="goTo('inbound')">
					<image src="/static/inbound.png" class="icon-img" />
					<view class="card-title-row">
						<text class="card-title">入库管理</text>
						<view class="badge">23</view>
					</view>
					<text class="card-desc">处理物料入库</text>
				</view>
				
				<view class="card" @click="goTo('stat')">
					<image src="/static/stat.png" class="icon-img" />
					<view class="card-title-row">
						<text class="card-title">数据统计</text>
					</view>
					<text class="card-desc">查看统计报表</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	const goTo = (type : string) => {
		let url = '';
		switch (type) {
			case 'inventory':
				url = '/pages/index/material/inventory/inventory';
				break;
			case 'outbound':
				url = '/pages/index/material/outbound/outbound';
				break;
			case 'inbound':
				url = '/pages/index/material/inbound/inbound';
				break;
			case 'stat':
				url = '/pages/index/material/stat/stat';
				break;
		}
		if (url) uni.navigateTo({ url });
	};
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		background: #F9FAFB;
		height: 100vh;
	}

	.card-list {
		padding: 30rpx 16rpx;
	}

	.card-row {
		display: flex;
		flex-direction: row;
		margin-bottom: 33rpx;
	}

	.card {
		flex: 1;
		background: #fff;
		border-radius: 16rpx;
		margin: 0 16rpx;
		padding: 42rpx 28rpx;
		box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.04);
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		position: relative;
	}

	.icon-img {
		width: 135rpx;
		height: 135rpx;
		margin-bottom: 15rpx;
		margin-top: -18rpx;
	}

	.card-title-row {
		display: flex;
		align-items: center;
		margin-bottom: 4rpx;
	}

	.card-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #222;
		margin-right: 12rpx;
	}

	.badge {
		background: #f5f6fa;
		color: #888;
		font-size: 26rpx;
		border-radius: 24rpx;
		padding: 0 16rpx;
		height: 44rpx;
		display: flex;
		align-items: center;
		margin-left: 4rpx;
	}

	.card-desc {
		font-size: 26rpx;
		color: #b0b0b0;
		margin-top: 4rpx;
	}
</style>